<div class="row mb-1">
    <div class="col">
        <sqx-language-selector [language]="snapshot.language" (languageChange)="setLanguage($event)" [languages]="languages" size="sm" />
    </div>

    <div class="col-auto">
        <button class="btn btn-sm btn-secondary" (click)="unset()" [disabled]="isEmpty" type="button"><i class="icon-close"></i></button>
    </div>
</div>

@switch (type) {
    @case ("text") {
        <input
            class="form-control"
            [attr.id]="id"
            [attr.name]="name"
            [attr.type]="type"
            (blur)="callTouched()"
            [ngModel]="currentValue"
            (ngModelChange)="setValue($event)" />
    }

    @case ("number") {
        <input
            class="form-control"
            [attr.id]="id"
            [attr.name]="name"
            [attr.type]="type"
            (blur)="callTouched()"
            [ngModel]="currentValue"
            (ngModelChange)="setValue($event)" />
    }

    @case ("tags") {
        <sqx-tag-editor (editorBlur)="callTouched()" [ngModel]="currentValue" (ngModelChange)="setValue($event)" />
    }

    @case ("datetime") {
        <sqx-date-time-editor (editorBlur)="callTouched()" mode="DateTime" [ngModel]="currentValue" (ngModelChange)="setValue($event)" />
    }

    @case ("date") {
        <sqx-date-time-editor (editorBlur)="callTouched()" mode="Date" [ngModel]="currentValue" (ngModelChange)="setValue($event)" />
    }

    @case ("boolean") {
        <div class="form-check">
            <input
                class="form-check-input"
                [attr.id]="id"
                (blur)="callTouched()"
                [ngModel]="currentValue"
                (ngModelChange)="setValue($event)"
                sqxIndeterminateValue
                type="checkbox" />
            <label class="form-check-label" [attr.for]="id"></label>
        </div>
    }
}
